<template>
  <!-- 大屏容器，支持全屏功能 --> <!-- 获取DOM引用 --> <!-- 全屏激活状态 --><!-- 退出全屏状态 -->
  <div 
    ref="tscreen"  
    :class="{ 
      'full-box': true, 
      'active-full': isFull,  
      'quit-full': !isFull    
    }"
    :style="`${isActiveFull ? 'position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999;' : ''}font-size:${fontSize}`"
    @dblclick="isFullClick" 
  > <!-- 双击触发全屏切换 -->
    <!-- 标题栏插槽 -->
    <slot name="header">
      <!-- 默认标题栏布局 -->
      <el-row class="header-box">
        <!-- 左侧插槽区 -->
        <div class="header-left">
          <slot name="header-left"></slot>
        </div>
        
        <!-- 标题区 -->
        <div v-if="title" style="font-size: 0.4rem">{{ title }}</div>
        <div v-else style="font-size: 0.4rem">
          <slot name="title"></slot>
        </div>
        
        <!-- 右侧时间区 -->
        <div class="header-time">
          <slot name="header-right"></slot>
          <div v-if="nowTimeShow" style="min-width: 1.9rem">{{ nowTime }}</div>
        </div>
      </el-row>
    </slot>
    
    <!-- 主内容区 -->
    <div class="view-main">
      <slot></slot>  <!-- 默认内容插槽 -->
    </div>
  </div>
</template>

<script setup lang="ts" name="TScreen">
import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from "vue";
import screenfull from "screenfull";  // 全屏控制库
import dayjs from "dayjs";            // 时间处理库

// 组件属性定义
defineProps({
  title: { type: String, default: "" },          // 标题文本
  nowTimeShow: { type: Boolean, default: true }, // 是否显示时间
  isActiveFull: { type: Boolean, default: false }// 是否覆盖屏幕
});

const tscreen = ref();        // 容器DOM引用
const isFull = ref(false);    // 全屏状态标志
const record = ref(true);     // 全屏状态记录标志
const cacheFull: any = ref(false); // 全屏前状态缓存
const intervalId: any = ref(null); // 时间更新计时器
const nowTime: any = ref(null);   // 当前时间
const fontSize: any = ref(null);  // 动态计算的字号
const emits = defineEmits(["transFormaTion"]); // 自定义事件：传递尺寸变化

// 生命周期钩子
onMounted(() => {
  window.addEventListener("resize", setFontSize); // 监听窗口变化
  addInterval();   // 启动时间更新
  setFontSize();   // 初始设置字号
});

onActivated(() => {
  window.addEventListener("resize", setFontSize);
  stopInterval();  // 停止可能存在的计时器
  setFontSize();   // 重新计算字号
});

onDeactivated(() => {
  stopInterval();
  window.removeEventListener("resize", setFontSize);
  document.documentElement.style.fontSize = "14px"; // 恢复默认字号
});

onUnmounted(() => {
  stopInterval();
  window.removeEventListener("resize", setFontSize);
  document.documentElement.style.fontSize = "14px";
});

// 双击切换全屏
const isFullClick = () => {
  if (record.value) {
    cacheFull.value = isFullScreen(); // 记录当前全屏状态
    record.value = false;
  }
  isFull.value = !isFull.value; // 切换全屏标志
  
  if (!isFull.value) record.value = true;
  
  // 执行全屏/退出操作
  if (isFull.value && !isFullScreen()) screenfull.toggle();
  else if (!isFull.value && cacheFull.value != isFullScreen()) screenfull.toggle();
};

// 检测当前是否全屏
const isFullScreen = () => document.fullscreenElement !== null;

// 启动时间更新计时器
const addInterval = () => {
  if (intervalId.value) return;
  intervalId.value = setInterval(() => {
    nowTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); // 格式化当前时间
  }, 1000);
};

// 停止计时器
const stopInterval = () => {
  clearInterval(intervalId.value);
  intervalId.value = null;
};

// 动态计算字号 (基于1920x1080设计稿)
const setFontSize = () => {
  const hei = tscreen.value.offsetHeight;
  const wid = tscreen.value.offsetWidth;
  
  // 根据宽高比选择缩放基准
  if (hei / 1080 <= wid / 1920) {
    fontSize.value = 100 * (hei / 1080); // 高度基准
  } else {
    fontSize.value = 100 * (wid / 1920); // 宽度基准
  }
  
  document.documentElement.style.fontSize = `${fontSize.value}px`;
  emits("transFormaTion", hei, wid, fontSize.value); // 通知父组件尺寸变化
};
</script>

<style lang="scss" scoped>
/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0.01rem;
}

.full-box {
  background: #101a32; // 深蓝背景
  /* 禁止文本选择 */
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

/* 全屏状态定位 */
.active-full {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1500; // 确保在最顶层
}

/* 非全屏状态定位 */
.quit-full {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* 标题栏样式 */
.header-box {
  width: auto;
  margin-bottom: 0.1rem;
  height: 0.76rem;
  display: flex;
  justify-content: space-between;
  background: url("@/assets/images/header_img.png") no-repeat center top; // 标题背景图

  &>div {
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
    width: 1rem;
    padding: 0.1rem;

    /* 左侧区域 */
    &:first-child {
      justify-content: start;
    }

    /* 中间标题区域 */
    &:nth-child(2) {
      flex-grow: 1.5;
      justify-content: center;
      font-size: 0.36rem;
      font-weight: bold;
      color: rgba(0, 106, 255, 1); // 蓝色标题
    }

    /* 右侧时间区域 */
    &:last-child {
      justify-content: flex-end;
      color: #fff;
      font-size: 0.22rem;
      font-family: DS-Digital-Bold, DS-Digital; // 特殊字体
    }
  }

  .header-time {
    display: flex;
    font-family: "timefont" !important; // 时间专用字体
  }
}

/* 主内容区样式 */
.view-main {
  height: calc(100% - 0.86rem); // 扣除标题高度
  width: auto;
  overflow-y: auto; // 垂直滚动
}
</style>